<template>
  <div style="border:1px solid red;">
    <el-button :disabled="imgDataList.length >= limitNum" type="primary" size="default" @click="selectFile">选择文件</el-button>
    <el-button :disabled="imgDataList.length >= limitNum" type="primary" size="default" @click="confirm">确定</el-button>
    <el-button type="primary" size="default" @click="upload">上传</el-button>
    <el-button type="danger" size="default" @click="clear">清空</el-button>
    <input
      v-show="false"
      ref="input"
      type="file"
      name="image"
      :accept="fileType"
      @change="setImage"
    >
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <div>裁剪框</div>
        <vue-cropper
          v-if="imgSrc"
          ref="cropper"
          class="cropper img"
          :src="imgSrc"
          preview=".preview"
        />
      </el-col>

      <el-col :span="12" :offset="0">
        <div>预览</div>
        <div class="preview img" />
      </el-col>
    </el-row>
    <el-row>
      <div>已选择图片：<span>{{ imgDataList.length }}/{{ limitNum }}</span></div>
      <transition-group name="fade">
        <div v-for="(img,index) in imgDataList" :key="index" style="border:1px solid red">
          <el-row>
            <el-col :span="1" :offset="0">
              {{ index+1 }}.
            </el-col>
            <el-col :span="12" :offset="0">
              <el-image :src="img" fit="contain" class="img" />
            </el-col>
            <el-col :span="11" :offset="0">
              <div style="display:inline-block">
                <el-button type="text" size="default" @click="deletE(index)">删除</el-button>
              </div>
            </el-col>
          </el-row>

        </div>
      </transition-group>

    </el-row>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
  name: 'ImgCropper',
  components: {
    'vue-cropper': VueCropper
  },
  props: {
    limitNum: {
      type: Number,
      default: 0
    },
    limitFileSize: {
      type: Number,
      default: 0
    },
    fileType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imgSrc: '',
      cropImg: '',
      imgDataList: []
    }
  },
  methods: {
    setImage(e) {
      const file = e.target.files[0]
      const fileSize = file.size / (1024 * 1024)
      if (file.type.indexOf('image/') === -1) {
        alert('Please select an image file')
        return
      }
      if (fileSize >= this.limitFileSize) {
        this.$message.warning(`上传图片大小不能超过${this.limitFileSize}MB`)
        return
      }
      if (typeof FileReader === 'function') {
        const reader = new FileReader()
        reader.onload = (event) => {
          this.imgSrc = event.target.result
          // rebuild cropperjs with the updated source
          if (this.imgSrc !== '') {
            this.$refs.cropper?.replace(event.target.result)
          }
        }
        reader.readAsDataURL(file)
      } else {
        alert('Sorry, FileReader API not supported')
      }
    },
    selectFile() {
      this.$refs.input.click()
    },
    clear() {
      this.$confirm('确定清空吗？').then(() => {
        this.imgDataList = []
      })
    },
    deletE(index) {
      this.$confirm('确定删除吗？').then(() => {
        this.imgDataList.splice(index, 1)
      })
    },
    confirm() {
      this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL()
      this.imgDataList.push(this.cropImg)
      console.log(this.imgDataList)
    },
    upload() {
      if (this.imgDataList.length === 0) {
        this.$message.warning('请选择文件并裁剪确认之后再上传！')
        return
      }
      this.$confirm('确定上传吗？').then(() => {
        console.log('上传')
      })
    }
  }
}
</script>

<style scoped>
.img{
  height: calc(372px * (9 / 16));
}
.preview {
  overflow: hidden;
}
.cropper {
  overflow: hidden;
  border:1px solid red;
  background-color: black;
}
</style>
